<template>
  <div class="travelExpenses" id="travelExpenses">
    <div class="travelExpenses-head">
      <img :src="objData.qrcode" class="travelExpenses-code" alt="" width="100" height="100" />
      <div class="travelExpenses-head-text">
        <h1>差旅费报销单</h1>
        <p>填报日期：{{ objData.reimbursementDate }}</p>
      </div>
    </div>
    <table width="100%" height="500px" border="1" align="center" cellpadding="1" cellspacing="1" class="table-form-1">
      <tr>
        <td>报销单位</td>
        <td colspan="3">{{ showIdLabel(organizationList, objData.departmentId, 'organizationName') }}</td>
        <td>日期</td>
        <td colspan="3">{{ objData.reimbursementDate }}</td>
      </tr>
      <tr>
        <td>费用项目</td>
        <td colspan="3">{{ expenditureApplicationObj.reason }}</td>
        <td>职别</td>
        <td>{{ travelsData.travelRank }}</td>
        <td>出差人数</td>
        <td>{{ travelsData.travelNum }}</td>
      </tr>
      <tr>
        <td>姓名</td>
        <td colspan="3"></td>
        <td>出差起止日期</td>
        <td colspan="3">{{ travelsData.travelStart }} - {{ travelsData.travelEnd }}</td>
      </tr>
      <tr>
        <td>起止地点</td>
        <td colspan="2">{{ travelsData.travelPositionStart }} - {{ travelsData.travelPositionEnd }}</td>
        <td>出差事由</td>
        <td colspan="4">{{ expenditureApplicationObj.items }}</td>
      </tr>
      <tr>
        <td colspan="4">路费开支项目</td>
        <td colspan="4">各项补助</td>
      </tr>
      <tr>
        <td>费别</td>
        <td>金额</td>
        <td>费别</td>
        <td>金额</td>
        <td>费别</td>
        <td>天数</td>
        <td>标准</td>
        <td>金额</td>
      </tr>
      <tr>
        <td>车船费</td>
        <td>{{ travelsData.amountShip }}</td>
        <td>住宿费</td>
        <td>{{ travelsData.amountHotel }}</td>
        <td>伙食补贴</td>
        <td></td>
        <td></td>
        <td>{{ travelsData.amountCatering }}</td>
      </tr>
      <tr>
        <td>飞机费</td>
        <td>{{ travelsData.amountPlane }}</td>
        <td>邮寄费</td>
        <td></td>
        <td>交通补助</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>动车火车费</td>
        <td>{{ travelsData.amountTrain }}</td>
        <td>市内交通费</td>
        <td>{{ travelsData.amountCar }}</td>
        <td>扣款项</td>
        <td colspan="2"></td>
        <td></td>
        <!-- <td>8</td> -->
      </tr>
      <tr>
        <td>会务费</td>
        <td></td>
        <td>其他费用</td>
        <td>{{ travelsData.amountOther }}</td>
        <td>其他说明</td>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td colspan="2">合计金额（大写）</td>
        <td colspan="4">{{ DX(parseFloat(travelsData.amountShip) + parseFloat(travelsData.amountHotel) + parseFloat(travelsData.amountCatering) + parseFloat(travelsData.amountPlane) + parseFloat(travelsData.amountTrain) + parseFloat(travelsData.amountCar) + parseFloat(travelsData.amountOther)) }}</td>
        <td>合计￥</td>
        <td>{{ parseFloat(travelsData.amountShip) + parseFloat(travelsData.amountHotel) + parseFloat(travelsData.amountCatering) + parseFloat(travelsData.amountPlane) + parseFloat(travelsData.amountTrain) + parseFloat(travelsData.amountCar) + parseFloat(travelsData.amountOther) }}</td>
      </tr>
      <tr>
        <td>冲销项目</td>
        <td colspan="3">摘要</td>
        <td colspan="2">原借款项目</td>
        <td>本次冲销金额</td>
        <td>职员</td>
        <!-- <td>6</td> -->
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="7">{{ expenditureApplicationObj.remark }}</td>
      </tr>
      <tr>
        <td>院长</td>
        <td></td>
        <td>分管财务院领导</td>
        <td></td>
        <td>分管部门院领导</td>
        <td></td>
        <td>部门负责人</td>
        <td></td>
      </tr>
      <tr>
        <td>基本支出财务负责人</td>
        <td></td>
        <td>项目支出财务负责人</td>
        <td></td>
        <td>会计审核</td>
        <td></td>
        <td>会计审核</td>
        <td></td>
      </tr>
      <tr>
        <td colspan="6"></td>
        <td>经办人</td>
        <td></td>
      </tr>
    </table>
  </div>
  <div style="margin-top: 20px;">
    <el-button type="primary" v-print="'#travelExpenses'" @click="doPrint">打印</el-button>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {svc, showIdLabel, DX, genQrcodeStr} from "@/config/common";
import initListStore from '@/store/modules/initList'

const props = defineProps({
  travelsData: {
    required: true,
    type: Array,
  },
  objData: {
    required: true,
    type: Object,
  },
  expenditureApplicationObj: {
    required: true,
    type: Object,
  },
})

const emit = defineEmits(['close', 'projectListSelect'])

// tab 切换
let activeName = ref('first')
// 基本数据
let objData = ref({})
let expenditureApplicationObj = ref({})
let travelsData = ref({})

// // 附件
// let fileList = ref([])

// let travels = ref({})

// // 单位列表
// let governmentList = ref([])
// // 主管部门
// let organizationList = ref([])

// const userList = ref([])
// const expenditurePtypeList = ref([])
// const expenditureFunctionalList = ref([])
// const expenditureEconomicList = ref([])
// const expenditureFiscalList = ref([])
// const expenditureSubjectList = ref([])

// let attachmentVisible = ref(false)

watch(() => [props.travelsData, props.objData, props.expenditureApplicationObj], async vals => {
  travelsData.value = vals[0][0]
  objData.value = vals[1]
  expenditureApplicationObj.value = vals[2]
  let str = genQrcodeStr("expenditure.reimbursement.travel", objData.value.id, objData.value['reimbursementCode'])
  let img = await doGet(svc, '/customCode/qrcode', {content: str, width:100, height:100}, false)
  objData.value.qrcode = 'data:image/gif;base64,' + img
},{immediate:true})

function doPrint() {
  console.log("doPrint", objData.value)
}
</script>

<style scoped>
.travelExpenses {
  width: 100%;
}
.travelExpenses-head {
  width: 100%;
  display: flex;
}
.travelExpenses-code {
  width: 100px;
  height: 100px;
}
.travelExpenses-head-text {
  width: 100%;
}
.travelExpenses-head-text h1 {
  height: 50px;
  text-align: center;
  padding: 0;
  margin: 0;
}
.travelExpenses-head-text p {
  height: 50px;
  text-align: right;
  font-size: 16px;
  padding: 0;
  margin: 0;
}
.table-form-1 {
  border-collapse: collapse;
  text-align:center;
  table-layout:fixed;
  margin-top: 10px;
}
td {
  padding: 10px 0;
}
</style>
